<template>
    <div class="memberinfo-layout">
        <div class="info-back">
            <el-row :gutter="20">
                <el-col :span="20" class="btns">
                    <router-link to='/percentage'>
                        <div class="back-icon">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </div>
                    </router-link>
                </el-col>
                <el-col :span="4" class="btns">
                    <el-button type="primary" @click="onSubmit" class="save red-btn" v-if="">确定</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="member-info-title">
            <el-form :model="formMember" label-width="80px" ref="formMember" class="member-info-form">
                <el-form-item label="员工姓名" prop="ownerName">
                    <div class="el-left">
                        <el-input v-model="formName" v-on:focus="selectSomeOne"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="状态">
                    <div class="el-left">
                        <el-switch on-text="启用" off-text="" v-model="status" :disabled="true"></el-switch>
                    </div>
                </el-form-item>
                <el-form-item label="提成类型">
                    <div class="el-left">
                        <el-input placeholder="百分比" :disabled="true"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="计提值" prop="prizeValue" :rules="[
                    {
                        pattern: /^100$|^(\d|[1-9]\d)(\.\d+)*$/,
                        message: '请输入正确计提值',
                        trigger: 'change'
                    }
                  ]">
                    <el-input v-model="formMember.prizeValue"></el-input>
                </el-form-item>
                <el-form-item label="建档时间" prop="startDate">
                    <div class="el-left">
                        <el-input v-model="formMember.createTime" :disabled="true"></el-input>
                    </div>
                </el-form-item>

            </el-form>
        </div>
    </div>

</template>

<script>
    import qs from 'qs';
    export default {
        name: 'keepailvepercentage',
        data: function () {
            return {
                items: [],
                radio: '1',
                formMember: {},
                status: true,
                formName: ''
            }
        },
        watch: {
            status(val){
                if (val) {
                    this.formMember.state = 1;
                } else {
                    this.formMember.state = 0;
                }
            }
        },
        created: function () {
            this.$$("#content").scrollTop(0)
            if (this.$route.query.formMember) {
                this.formMember = this.$route.query.formMember;
            }
            if (this.formMember.state) {
                this.status = true;
            }else{
                this.status = false;
            }
            if (this.formMember.ownerName) {
                this.formName = this.formMember.ownerName;
            }
            if (this.formMember.name) {
                this.formName = this.formMember.name;
            }
        },
        methods: {
            onSubmit() {
//                http://192.168.1.136:8081/shop/user/prize/
                let self = this;
                var owner = {};
                if (this.formMember.id) {
                    owner.id = this.formMember.id;
                }
                if (this.formMember.ownerId) {
                    owner.id = this.formMember.ownerId;
                }
                let args = {
                    name: this.formName,
                    owner: owner,
                    prizeType: 20,
                    prizeValue: this.formMember.prizeValue/100,
                    state: 1,
                    kindCode: 20
                };
                if (this.formMember.prizeValue > 0 && this.formMember.prizeValue < 100) {
                    self.$axioxs.post("/user/prize/", args)
                        .then(function (res) {
                                self.$router.push("/percentage");
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                } else {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: '请输入正确计提值'
                    });
                }
            },
            selectSomeOne(){
                this.$router.push("/addEmployee");
            }
        }
    }
</script>
<style scoped>

    .content a:not(.button):visited {
        color: #333;
    }

    .percentage-layout .checkbox, .radio {
        line-height: 70px;
    }


    .member-info-form {
        width: 90%;
        padding-top: 0px;
        margin: 0 auto;
    }
    .member-info-title{
        padding-top: 10px;
    }

</style>
